{% extends "jogo/basedesign.html" %}

{% block extrahead %}
<script language="javascript" type="text/javascript">
<!--
	i = 0;
	dificuldade = [
	{% for n, v in dificuldades %}
	'{{ v }}',
	{% endfor %}
	]

	function selectDifi(option) {
	    if(option == 'left') {
	        if(i == 0);
	        else i--;
	        document.getElementById('listdificuldades').value = dificuldade[i];
	        document.getElementById('dificuldade').value = '' + i + 1;
	    } else {
	    	if (i==3);
	        else i ++;
	        document.getElementById('listdificuldades').value = dificuldade[i];
	        document.getElementById('dificuldade').value = '' + i + 1;
	    }

	}
// -->
</script>

<script type="text/javascript">
	$(function() {
		$(".check").button({
            icons: {
               primary: 'ui-icon-circle-check'}
           });
		$("button, input:submit, a").button();
	});
</script>

{% endblock extrahead%}

{% block tela %}
<h1 align="center">Os Indicados</h1>
<p align="center"><img src="/osindicadosmedia/img/logo.png"/></p>
<div id="erro" style="color: red">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{error}}</div>
<form action="../config/" method="post">
{% csrf_token %}

<table align="center" border="0" cellpadding="3">
	<tr>
		<td><input style="color: #B1FB17; font-size: 20px;" type="submit" value="Iniciar Partida">
		</td>
		<td><a href="../ranking/">Ver Ranking</a>
		</td>
		<td><a href="../comojogar/">Como Jogar</a><br>
		</td>
	</tr>
</table>

{% endblock tela %}

{% block sidebar %}
	<table style="font-size: small;" align="center">
		<tr><td>
	{% for tema in temas %}
		<input type="checkbox" name="temas" value="{{tema}}" class="check" id="{{tema}}" checked/><label for="{{tema}}" class="temaselecionado">{{tema}}</label><br/>
		</td></tr><tr><td>

	{% endfor %}
	</td></tr>
		</table>
{% endblock sidebar%}

{% block footer %}
Dificuldade:
<input type="hidden" name="dificuldade" value='0' id="dificuldade"/>
<table>
 <tr><td><div id="lefclick" onclick="javascript: selectDifi('left');"><img src="/osindicadosmedia/img/seta1.png" style="cursor:pointer"> </div></td>
	<td><input type="text" name="listdificuldades" value="Amador" id="listdificuldades" size="10"/></td>
    <td><div id="rightclick" onclick="javascript: selectDifi('right');"><img src="/osindicadosmedia/img/seta2.png" style="cursor:pointer"> </div></td></tr>
</table>
</form>
{% endblock%}

